<template>
    <div id="login">
        <div class="login-form" @keyup.enter="login">
            <!--            <h3>智慧超市运营管理系统</h3>-->
            <h3>星时代爪哇后台管理系统</h3>
            <el-form status-icon>
                <el-form-item prop="username">
                    <el-input type="username"
                              v-model="username"
                              size="medium"
                              prefix-icon="el-icon-user-solid"
                              placeholder="账号">
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="password"
                              placeholder="密码"
                              show-password
                              size="medium"
                              prefix-icon="el-icon-lock"
                              autocomplete="off">

                    </el-input>
                </el-form-item>
                <div style="margin: 16px 0;font-size: 13px;">
                    <el-checkbox v-model="checked">记住密码</el-checkbox>
                </div>
                <el-form-item v-show="flag">
                    <el-button type="primary" size="medium" style="width: 100%;" @click="login">提交
                    </el-button>
                </el-form-item>
                <el-form-item v-show="!flag">
                    <el-button type="primary" size="medium" icon="el-icon-loading" style="width: 100%;">登录中···
                    </el-button>
                </el-form-item>
            </el-form>
        </div>

        <p style="position: fixed;text-align: center;bottom: 0;left: 0;right: 0;color: white;">版权所有 星时代爪哇 Copyright ©
            2020 - {{year}} <a href="https://beian.miit.gov.cn/" target="_blank"
                               style="color: white;text-decoration: none;">蜀ICP备2020030393号-1</a></p>
    </div>
</template>

<script>
    import {login} from "@/api/login";

    export default {
        name: "Login",
        created() {
            if (localStorage.getItem("tip_username") != null) {
                this.username = localStorage.getItem("tip_username");
                this.password = localStorage.getItem("tip_password");
            }
            this.year = new Date().getFullYear()
        },
        data() {
            return {
                username: '',
                password: '',
                checked: false,
                flag: true,
                year: ""
            };
        },
        methods: {
            login() {
                //前端验证
                if (this.username === "" || this.password === "") {
                    this.$message.warning("账号或密码不能为空");
                    return false;
                }

                this.flag = false;
                login(this.username, this.password)
                    .then(res => {
                        if (res.code != 0) {
                            this.$message.error("登录失败：" + res.msg);
                            return false;
                        }

                        if (res.data.user.roleId === 0) {
                            this.$message.error("登录失败,员工不能登录后台管理系统！");
                            return false;
                        }

                        this.$message.success("登录成功");
                        sessionStorage.setItem('token', res.data.token);
                        sessionStorage.setItem("username", res.data.user.trueName);
                        if (this.checked) {
                            //记住我
                            localStorage.setItem("tip_username", this.username);
                            localStorage.setItem("tip_password", this.password);
                        } else {
                            localStorage.removeItem("tip_username");
                            localStorage.removeItem("tip_password");
                        }
                        this.$router.push("/admin");

                    }).finally(() => {
                    this.flag = true;
                })
            },
        }
    }
</script>

<style scoped lang="scss">
    #login {
        height: 100vh;
        background: url("../assets/login_bg.jpg") no-repeat;
        background-size: 100% 100%;
    }

    .login-form {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        height: 320px;
        border-radius: 6px;
        background: #fff;
        width: 400px;
        padding: 25px 25px 5px 25px;

        h3 {
            text-align: center;
            display: block;
            font-size: 1.17em;
            font-weight: bold;
            margin: 0 auto 30px auto;
            color: #707070;
        }
    }
</style>